<!--
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎留言</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container title">
        <h1 class="text-center text-primary">Vue2.0+PHP留言墙</h1>
    </div>
    <div class="container" id="app">
        <div class="row submit-comment">
            <textarea name="content" id=""  rows="10" v-model="content" @keydown.enter="add"></textarea>
            <div class="submit-comment-action">
                <input type="button" class="btn btn-success" value="提交" @click="add">
                <span class="text-muted">(可按Enter 回复)</span>
            </div>
        </div>
        <div class="comment-list">
            <div class="nomess text-muted" v-show="msgData.length==0"><h5>暂无留言</h5></div>
            <div class="messlist">
                <div class="reply" v-for="(item,index) in msgData" v-cloak>
                    <p class="replyContent">{{item.content}}</p>
                    <p class="operation">
                        <span class="time">{{item.time}}</span>
                        <span class="handle">
                            <a href="javascript:;" class="fa fa-thumbs-o-up" @click="top(item.id,index)">{{item.acc}}</a>
                            <a href="javascript:;" class="text-danger fa fa-thumbs-o-down" @click="down(item.id,index)">{{item.ref}}</a>
                            <a href="javascript:;" class="fa fa-trash" @click="nowIndex=index" data-toggle="modal" data-target="#modal"></a>
                        </span>
                    </p>
                </div>
            </div>
            <div class="page">
                <ul class="pagination">
                    <li class="page-item"><a href="javascript:;" class="page-link"><</a></li>
                    <li class="page-item"><a href="javascript:;" class="page-link">1</a></li>
                    <li class="page-item"><a href="javascript:;" class="page-link">2</a></li>
                    <li class="page-item"><a href="javascript:;" class="page-link">3</a></li>
                    <li class="page-item"><a href="javascript:;" class="page-link">></a></li>
                </ul>
            </div>
        </div>
        <div class="modal fade" id="modal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="text-primary">删除</h5>
                        <button type="button" class="close" data-dismiss="modal" > <span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body text-warning">
                        确定要删除这条留言吗
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" @click="del(nowIndex)" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script>
    window.onload=function () {
        var URL='weibo.php';
        new Vue({
            el:'#app',
            data:{
                content:'',
                msgData:[],
                nowIndex:-100
            },
            methods:{
                add:function () {
                    this.$http({
                        url:URL,
                        data:{//给后台发送的数据
                            act:'add',
                            content:this.content
                        }
                    }).then(function (res) {
                        //console.log(res.data)
                        var json=res.data;
                        console.log(json);
                        //msgData添加数据
                        this.msgData.unshift({
                            content:this.content,
                            time:json.time,
                            acc:0,
                            ref:0,
                            id:json.id
                        });
                        this.content='';
                    });
                },
                getPageData:function (n) {
                    this.$http({
                        url:URL,
                        data:{
                            act:'get',
                            page:n
                        }
                    }).then(function (res) {
                        console.log(res.data);
                        var arr=res.data;
                        for(var i=0;i<arr.length;i++){
                            this.msgData.push({
                                content:arr[i].content,
                                time:arr[i].time,
                                acc:arr[i].acc,
                                ref:arr[i].ref,
                                id:arr[i].id
                            });
                        }
                    });
                },
                top:function (id,index) {
                    this.$http({
                        url:URL,
                        data:{
                            act:'acc',
                            id:id
                        }
                    }).then(function () {
                        this.msgData[index].acc=this.msgData[index].acc+1;
                    });
                },
                down:function (id,index) {
                    this.$http({
                       url:URL,
                        data:{
                           act:'ref',
                           id:id
                        }
                    }).then(function () {
                        this.msgData[index].ref=this.msgData[index].ref+1;
                    });
                },
                del:function (nowIndex) {
                    //alert(this.msgData[nowIndex].id);
                    this.$http({
                        url:URL,
                        data:{
                            act:'del',
                            id:this.msgData[nowIndex].id
                        }
                    }).then(function () {
                        this.msgData.splice(nowIndex,1);
                    });
                },
                send:function () {
                    alert(1);
                }
            },
            created:function () {
                this.getPageData(1);
            }
        });
    };
</script>
</body>
</html>-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            width: 100%;

        }
        #rich-editor{
            width: 100%;
            min-height: 300px;
            border: 2px solid red;
        }
        #rich-editor img{
            width: 300px!important;
        }
        p img{
            width: 300px!important;
        }
    </style>
</head>
<body>
<form id="js-upload" action="imgupload.php" method="post" enctype="multipart/form-data">
    <input id="js-file" name="file" class="fileimg" type="file" accept="image/*">
</form>
<div contenteditable="true" id="rich-editor"></div>
<button>提交</button>
<p>
    <img src="20180125/5a69ade0967f3.jpg">这个是赵丽颖<div><br></div><img src="20180125/5a69adf07200a.jpg">这个是考拉<div><br></div><div><pre id="best-content-2247047257" accuse="aContent" class="best-text mb-10" style="margin-top: 10px; margin-bottom: 10px; padding: 0px; font-family: &quot;PingFang SC&quot;, &quot;Lantinghei SC&quot;, &quot;Microsoft YaHei&quot;, arial, 宋体, sans-serif, tahoma; white-space: pre-wrap; word-wrap: break-word; font-size: 16px; line-height: 29px; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); min-height: 55px;">&lt;?<a href="https://www.baidu.com/s?wd=php&amp;tn=44039180_cpr&amp;fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1d-nhFbn1P-uAP-nvm3njbY0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPW6vPjDYPjb" target="_blank" class="baidu-highlight" rel="nofollow" style="color: rgb(63, 136, 191); text-decoration-line: none;">php</a><br style="content: &quot;&quot;; display: block; width: 700px; height: 0px; margin: 20px 0px;">  $file=’userfile/a/abc.txt’; //旧目录<br style="content: &quot;&quot;; display: block; width: 700px; height: 0px; margin: 20px 0px;">  $newFile=’userfile/b/newabc.txt’; //新目录<br style="content: &quot;&quot;; display: block; width: 700px; height: 0px; margin: 20px 0px;">  copy($file,$newFile); //拷贝到新目录<br style="content: &quot;&quot;; display: block; width: 700px; height: 0px; margin: 20px 0px;">  unlink($file); //删除旧目录下的文件<br style="content: &quot;&quot;; display: block; width: 700px; height: 0px; margin: 20px 0px;">?&gt;</pre></div>
</p>
<script src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
<script>
    (function($){
        var $_submit = $('#js-submit');
        var imgServer = 'upload/';//图片服务器URL
        var imgbox = $("#rich-editor");
        var vmPoimg = {
            allowExt:/jpg|png|jpeg/,//允许的扩展名
            checkExt:function(filename){//检测文件格式是否符合要求
                var start = filename.lastIndexOf(".");
                var end = filename.length;
                var ext = filename.substring(start,end).toLowerCase();
                return this.allowExt.test(ext);
            },

            uploadImg:function(filename){
                if(this.checkExt(filename)){
                    $("#js-upload").ajaxSubmit({
                        dataType: 'json',
                        success:function(data){
                            console.log(data);
                            var url = data.msg;
                            var img = document.createElement("img");
                            img.src = url;
                            $("#rich-editor").append(img);
                        },
                        error:function(){
                            alert('上传失败请重新上传!');
                        }
                    });
                }else{
                    alert('仅允许jpg,png,jpeg等格式!');
                }
            }
        };



        //图片上传
        $("#js-file").on('change',function(){
            vmPoimg.uploadImg($(this).val());
        });

        //数据提交
        $("button").on('click',function(){
            var htmls = $("#rich-editor").html();
            $('p').html(htmls)
            console.log(htmls);
            $.ajax({
                url: 'weibo.php',
                type: 'post',
                data: {
                    act:'add',
                    content:htmls
                },
                dataType: 'json',
                timeout: 1000,
                success: function (data, status) {
                    console.log(data)
                },
                fail: function (err, status) {
                    console.log(err)
                }
            })
        });


    })(jQuery);
</script>
</body>
</html>
